<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./lib/bnner/slider.css">
    <title>乐透首页</title>
</head>

<body>
    <!-- 头部 -->
    <header>
        <!-- 顶部导航 -->
        <div class="top-backimg">
            <div class="top-main container cf">
                <span class="fl">legochina.cn</span>
                <span class="bf fr">
                    欢迎光临
                    <a href="#" class="f6">乐购</a>
                    ，请
                    <a href="#" class="bf">登陆</a>
                    \
                    <a href="#" class="f6">注册</a>
                </span>
            </div>
        </div>
        <!-- 搜索框 -->
        <div class="search-box container cf">
            <a href="#" class="fr">我的订单</a>
            <a href="#" class="fr">购物车 3</a>
            <div class="search-bnt fr">
                <input type="text">
                <button type="button">搜索</button>
            </div>

        </div>
        <!-- 导航栏+logo -->
        <div class="nav-logo container cf">
            <img src="./images/logo.jpg" alt="1">
            <ul>
                <li><a href="#">图书</a></li>
                <li><a href="#">电子书</a></li>
                <li><a href="#">原创文学</a></li>
                <li><a href="#">服装</a></li>
                <li><a href="#">运动户外</a></li>
                <li><a href="#">孕婴童</a></li>
                <li><a href="#">家居</a></li>
                <li><a href="#">创意文具</a></li>
                <li><a href="#">地方特产</a></li>
                <li><a href="#">海外购</a></li>
                <li><a href="#">电器城</a></li>
            </ul>
        </div>
    </header>
    <!-- 主体 -->
    <main class="container">
        <div class="cf">


            <ul class="menu-2 fl">
                <li>
                    <a class="nav-1" href="#">图书、电子书、童书</a>
                    <div>
                        <span>
                            <a href="#">图书馆>></a>
                            <a href="#">儿童书馆>></a>
                            <a href="#">电子书馆>></a>
                        </span>
                        <dl>
                            <dd>文艺</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星</dt>
                            <dd>人文社科</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星 历史 政治军事 文化 心理学 法律</dt>
                            <dd>管理</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星 经济 投资理财 金融 互联网</dt>
                            <dd>励志</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星 励志成功 职场 心灵修养</dt>
                            <dd>教育</dd>
                            <dt>中小学教辅 考试 大中专教辅 外语 工具书 公务员 考研</dt>
                            <dd>科技</dd>
                            <dt>科普读物 计算机\网络 医学 工业技术 建筑 自然科学</dt>
                            <dd>生活</dd>
                            <dt>两性 孕期 育儿 保健 运动 休闲 旅游 美食 美妆 家居 生活 健身</dt>
                            <dd>刊\进口书</dd>
                            <dt>英文进口书 杂志 港台进口书 进口艺术画册</dt>
                        </dl>
                    </div>
                </li>
                <li>
                    <a class="nav-1" href="#">图书、电子书、童书</a>
                    <div>
                        <span>
                            <a href="#">图书馆>></a>
                            <a href="#">儿童书馆>></a>
                            <a href="#">电子书馆>></a>
                        </span>
                        <dl>
                            <dd>文艺</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星</dt>
                            <dd>人文社科</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星 历史 政治军事 文化 心理学 法律</dt>
                            <dd>管理</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星 经济 投资理财 金融 互联网</dt>
                            <dd>励志</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星 励志成功 职场 心灵修养</dt>
                            <dd>教育</dd>
                            <dt>中小学教辅 考试 大中专教辅 外语 工具书 公务员 考研</dt>
                            <dd>科技</dd>
                            <dt>科普读物 计算机\网络 医学 工业技术 建筑 自然科学</dt>
                            <dd>生活</dd>
                            <dt>两性 孕期 育儿 保健 运动 休闲 旅游 美食 美妆 家居 生活 健身</dt>
                            <dd>刊\进口书</dd>
                            <dt>英文进口书 杂志 港台进口书 进口艺术画册</dt>
                        </dl>
                    </div>
                </li>
                <li>
                    <a class="nav-1" href="#">图书、电子书、童书</a>
                    <div>
                        <span>
                            <a href="#">图书馆>></a>
                            <a href="#">儿童书馆>></a>
                            <a href="#">电子书馆>></a>
                        </span>
                        <dl>
                            <dd>文艺</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星</dt>
                            <dd>人文社科</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星 历史 政治军事 文化 心理学 法律</dt>
                            <dd>管理</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星 经济 投资理财 金融 互联网</dt>
                            <dd>励志</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星 励志成功 职场 心灵修养</dt>
                            <dd>教育</dd>
                            <dt>中小学教辅 考试 大中专教辅 外语 工具书 公务员 考研</dt>
                            <dd>科技</dd>
                            <dt>科普读物 计算机\网络 医学 工业技术 建筑 自然科学</dt>
                            <dd>生活</dd>
                            <dt>两性 孕期 育儿 保健 运动 休闲 旅游 美食 美妆 家居 生活 健身</dt>
                            <dd>刊\进口书</dd>
                            <dt>英文进口书 杂志 港台进口书 进口艺术画册</dt>
                        </dl>
                    </div>
                </li>
                <li>
                    <a class="nav-1" href="#">图书、电子书、童书</a>
                    <div>
                        <span>
                            <a href="#">图书馆>></a>
                            <a href="#">儿童书馆>></a>
                            <a href="#">电子书馆>></a>
                        </span>
                        <dl>
                            <dd>文艺</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星</dt>
                            <dd>人文社科</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星 历史 政治军事 文化 心理学 法律</dt>
                            <dd>管理</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星 经济 投资理财 金融 互联网</dt>
                            <dd>励志</dd>
                            <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星 励志成功 职场 心灵修养</dt>
                            <dd>教育</dd>
                            <dt>中小学教辅 考试 大中专教辅 外语 工具书 公务员 考研</dt>
                            <dd>科技</dd>
                            <dt>科普读物 计算机\网络 医学 工业技术 建筑 自然科学</dt>
                            <dd>生活</dd>
                            <dt>两性 孕期 育儿 保健 运动 休闲 旅游 美食 美妆 家居 生活 健身</dt>
                            <dd>刊\进口书</dd>
                            <dt>英文进口书 杂志 港台进口书 进口艺术画册</dt>
                        </dl>
                    </div>
                </li>
                <script>
                    for (let i = 1; i < 10; i++) {
                        document.write(`<li>
                <a class="nav-1" href="#">图书、电子书、童书</a>
                <div>
                    <span>
                        <a href="#">图书馆>></a>
                        <a href="#">儿童书馆>></a>
                        <a href="#">电子书馆>></a>
                    </span>
                    <dl>
                        <dd>文艺</dd>
                        <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星</dt>
                        <dd>人文社科</dd>
                        <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星 历史 政治军事 文化 心理学 法律</dt>
                        <dd>管理</dd>
                        <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星 经济 投资理财 金融 互联网</dt>
                        <dd>励志</dd>
                        <dt>小说 文学 传记 青春 动漫 艺术 摄影 明星 励志成功 职场 心灵修养</dt>
                        <dd>教育</dd>
                        <dt>中小学教辅 考试 大中专教辅 外语 工具书 公务员 考研</dt>
                        <dd>科技</dd>
                        <dt>科普读物 计算机\网络 医学 工业技术 建筑 自然科学</dt>
                        <dd>生活</dd>
                        <dt>两性 孕期 育儿 保健 运动 休闲 旅游 美食 美妆 家居 生活 健身</dt>
                        <dd>刊\进口书</dd>
                        <dt>英文进口书 杂志 港台进口书 进口艺术画册</dt>
                    </dl>
                </div>
            </li>`)
                    }
                </script>

            </ul>
            <!-- 轮播图 -->
            <div class="benner fr">
                <!--轮播开始-->
                <div class="pptbox" id="bannerInner">
                    <!--轮播的内容-->
                    <ul class="innerwrapper">
                        <li>
                            <a href="#"><img src="images/banner1.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="images/banner2.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="images/banner3.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="images/banner4.jpg" /></a>
                        </li>
                        <li>
                            <a href="#"><img src="images/banner5.jpg" /></a>
                        </li>
                    </ul>
                    <!--数字控制器-->
                    <ul class="controls">
                        <li class="current">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                    <!--按钮控制器-->
                    <span class="btnleft"></span>
                    <span class="btnright"></span>
                </div>
                <!--轮播结束-->
            </div>
        </div>
        <!-- 乐购·今日推荐 -->
        <div class="recommend">
            <h2>乐购·今日推荐</h2>
            <div class="recontent cf">
                <script>
                    for (let i = 0; i < 12; i++) {
                        document.write(` 
                        <a href="#" class="fl">
                    <img src="./images/product01.jpg" alt="1">
                    <img src="./images/limitTime.jpg" alt="1">
                    <p>黑爵青蜂侠六键电竞游戏鼠标</p>
                    <p>全国联保 一年免费包换</p>
                    <p>￥:299</p>
                </a>               
                    `)
                    }
                </script>


            </div>
        </div>
        <!-- 图书 电子书 -->
        <div class="book cf">
            <div class="book-nav wid cf">
                <h2 class="fl">图书 电子书</h2>
                <div class="book-active fr">
                    <span class="on">最新上架</span>
                    <span>独家畅销</span>
                    <span>电子书</span>
                </div>
            </div>
            <div class="book-main cf fl">
                <div class="main-left fl">
                    <a href="#"><img src="./images/index7_07.jpg" alt="1"></a>
                    <div>
                        <a href="#">中小学教辅</a>
                        <a href="#">外语</a>
                        <a href="#">考试</a>
                        <a href="#">小说</a>
                        <a href="#">文学</a>
                        <a href="#">青春文学</a>
                        <a href="#">成功\励志</a>
                        <a href="#">管理</a>
                        <a href="#">历史</a>
                        <a href="#">哲学\宗教</a>
                        <a href="#">亲子\家教</a>
                        <a href="#">全部分类></a>
                    </div>
                </div>
                <div class="main-right fr cf">
                    <div class="main-right-box">
                        <div class="main-benner">
                            <!--轮播开始-->
                            <div class="pptbox2" id="banner">
                                <!--轮播的内容-->
                                <ul class="innerwrapper">
                                    <li>
                                        <a href="#"><img src="images/banner1.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner2.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner3.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner4.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner5.jpg" /></a>
                                    </li>
                                </ul>
                                <!--数字控制器-->
                                <ul class="controls">
                                    <li class="current">1</li>
                                    <li>2</li>
                                    <li>3</li>
                                    <li>4</li>
                                    <li>5</li>
                                </ul>
                                <!--按钮控制器-->
                                <span class="btnleft"></span>
                                <span class="btnright"></span>
                            </div>
                            <!--轮播结束-->
                        </div>
                        <script>
                            for (let i = 1; i <= 6; i++) {
                                document.write(`
                                          <div class="fl">
                                <h5>奥运狂欢</h5>
                                <p>10万种电子书 直降40%</p>
                                <img src="./images/index09_05.jpg" alt="1">
                                <p>￥49<span><del>￥70</del></span></p>
                            </div> `)
                            }
                        </script>
                    </div>
                    <div class="main-right-box box2">
                        11
                    </div>
                    <div class="main-right-box box3">
                        11
                    </div>
                </div>
            </div>


            <div class="book-side fr">
                <h4>新书畅销榜</h4>
                <ul>
                    <li class="cf">
                        <span class="f6 fl">1</span>
                        <p class="fl ">就喜欢你看不惯我 又干不</p>
                        <div class="cf fl active">
                            <img src="./images/index08_05.jpg" alt="1" class="fl">
                            <span class="fr">从你的世界路过
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                        </div>
                    </li>
                    <li class="cf">
                        <span class="f6 fl">2</span>
                        <p class="fl active">就喜欢你看不惯我 又干不</p>
                        <div class="cf fl ">
                            <img src="./images/index08_05.jpg" alt="1" class="fl">
                            <span class="fr">从你的世界路过
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                        </div>
                    </li>
                    <li class="cf">
                        <span class="f6 fl">3</span>
                        <p class="fl active">就喜欢你看不惯我 又干不</p>
                        <div class="cf fl ">
                            <img src="./images/index08_05.jpg" alt="1" class="fl">
                            <span class="fr">从你的世界路过
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                        </div>
                    </li>
                    <li class="cf">
                        <span class="fl">4</span>
                        <p class="fl active">就喜欢你看不惯我 又干不</p>
                        <div class="cf fl ">
                            <img src="./images/index08_05.jpg" alt="1" class="fl">
                            <span class="fr">从你的世界路过
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                        </div>
                    </li>
                    <li class="cf">
                        <span class="fl">5</span>
                        <p class="fl active">就喜欢你看不惯我 又干不</p>
                        <div class="cf fl ">
                            <img src="./images/index08_05.jpg" alt="1" class="fl">
                            <span class="fr">从你的世界路过
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                        </div>
                    </li>
                    <li class="cf">
                        <span class="fl">6</span>
                        <p class="fl active">就喜欢你看不惯我 又干不</p>
                        <div class="cf fl ">
                            <img src="./images/index08_05.jpg" alt="1" class="fl">
                            <span class="fr">从你的世界路过
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                        </div>
                    </li>
                    <li class="cf">
                        <span class="fl">7</span>
                        <p class="fl active">就喜欢你看不惯我 又干不</p>
                        <div class="cf fl ">
                            <img src="./images/index08_05.jpg" alt="1" class="fl">
                            <span class="fr">从你的世界路过
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                        </div>
                    </li>
                    <li class="cf">
                        <span class="fl">8</span>
                        <p class="fl active">就喜欢你看不惯我 又干不</p>
                        <div class="cf fl ">
                            <img src="./images/index08_05.jpg" alt="1" class="fl">
                            <span class="fr">从你的世界路过
                                入选央视“2014中国好书”的80后作品！十年华语畅销小说，王家卫陈国富倾力推荐， 1500万次转发，超4亿次阅读</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 服装 -->
        <div class="cloth">
            <!-- 服装头 -->
            <div class="book cf">
                <div class="book-nav cf">
                    <h2 class="fl">服装</h2>
                    <div class="book-active fr">
                        <span class="on bnt">女装内衣 </span>
                        <span class="bnt">热销男装</span>
                        <span class="bnt">精品鞋靴</span>
                    </div>
                </div>
            </div>
            <!-- 服装体 -->
            <div class="cloth-main cf">
                <div class="cloth-top activee">
                    <div class="cloth-left fl">
                        <a href="#">
                            <img src="./images/index7_17.jpg" alt="1">
                        </a>
                        <div class="classify">
                            <a href="#">女包</a>
                            <a href="#">防晒品</a>
                            <a href="#">短裤</a>
                            <a href="#">冰丝内裤</a>
                            <a href="#">男包</a>
                            <a href="#">功能箱包</a>
                            <a href="#">蕾丝衬衫</a>
                            <a href="#">奢侈品</a>
                            <a href="#">男鞋</a>
                            <a href="#">女包</a>
                            <a href="#">女鞋</a>
                            <a href="#">全部分类></a>
                        </div>
                    </div>
                    <div class="cloth-min fl">
                        <div class="cloth-min-top">
                            <!--轮播开始-->
                            <div class="pptbox" id="Inner">
                                <!--轮播的内容-->
                                <ul class="innerwrapper">
                                    <li>
                                        <a href="#"><img src="images/index10_05.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner2.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner3.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner4.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner5.jpg" /></a>
                                    </li>
                                </ul>
                                <!--数字控制器-->
                                <ul class="controls">
                                    <li class="current">1</li>
                                    <li>2</li>
                                    <li>3</li>
                                    <li>4</li>
                                    <li>5</li>
                                </ul>
                                <!--按钮控制器-->
                                <span class="btnleft"></span>
                                <span class="btnright"></span>
                            </div>
                            <!--轮播结束-->
                        </div>
                        <div class="cloth-min-bot">
                            <a href="#">
                                <img src="./images/index11_08.jpg" alt="1">
                            </a>
                        </div>
                    </div>
                    <div class="cloth-right fl">
                        <div>
                            <img src="./images/index100_05.jpg" alt="1">
                            <img src="./images/index100_05.jpg" alt="1">
                            <img src="./images/index100_05.jpg" alt="1">
                        </div>
                        <div>
                            <img src="./images/index100_11.jpg" alt="">
                            <img src="./images/index100_11.jpg" alt="">
                            <img src="./images/index100_11.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="cloth-top top1">
                    111
                </div>
                <div class="cloth-top top2">
                    222
                </div>
                <div class="cloth-logo">
                    <img src="./images/index15_13.jpg" alt="1">
                    <img src="./images/index15_14.jpg" alt="1">
                    <img src="./images/logo13_11.jpg" alt="1">
                    <img src="./images/logo13_12.jpg" alt="1">
                    <img src="./images/logo13_13.jpg" alt="1">
                    <img src="./images/logo13_14.jpg" alt="1">
                    <img src="./images/logo13_15.jpg" alt="1">
                    <img src="./images/logo13_16.jpg" alt="1">
                    <img src="./images/logo13_17.jpg" alt="1">
                </div>
            </div>
        </div>
        <!-- 户外运动 -->
        <div class="outside">
            <!-- 服装头 -->
            <div class="book cf">
                <div class="book-nav cf">
                    <h2 class="fl">户外运动</h2>
                    <div class="book-active fr">
                        <span class="on bnt">国际名品 </span>
                        <span class="bnt">户外装备</span>
                        <span class="bnt">运动潮流</span>
                    </div>
                </div>
            </div>
            <!-- 服装体 -->
            <div class="cloth-main cf">
                <div class="cloth-top activee">
                    <div class="cloth-left fl">
                        <a href="#">
                            <img src="./images/160729pc-A.jpg" alt="1">
                        </a>
                        <div class="classify">
                            <a href="#">女包</a>
                            <a href="#">防晒品</a>
                            <a href="#">短裤</a>
                            <a href="#">冰丝内裤</a>
                            <a href="#">男包</a>
                            <a href="#">功能箱包</a>
                            <a href="#">蕾丝衬衫</a>
                            <a href="#">奢侈品</a>
                            <a href="#">男鞋</a>
                            <a href="#">女包</a>
                            <a href="#">女鞋</a>
                            <a href="#">全部分类></a>
                        </div>
                    </div>
                    <div class="cloth-min fl">
                        <div class="cloth-min-top">
                            <!--轮播开始-->
                            <div class="pptbox" id="pptt">
                                <!--轮播的内容-->
                                <ul class="innerwrapper">
                                    <li>
                                        <a href="#"><img src="images/index10_05.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner2.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner3.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner4.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner5.jpg" /></a>
                                    </li>
                                </ul>
                                <!--数字控制器-->
                                <ul class="controls">
                                    <li class="current">1</li>
                                    <li>2</li>
                                    <li>3</li>
                                    <li>4</li>
                                    <li>5</li>
                                </ul>
                                <!--按钮控制器-->
                                <span class="btnleft"></span>
                                <span class="btnright"></span>
                            </div>
                            <!--轮播结束-->
                        </div>
                        <div class="cloth-min-bot">
                            <a href="#">
                                <img src="./images/index11_08.jpg" alt="1">
                            </a>
                        </div>
                    </div>
                    <div class="cloth-right fl">
                        <div>
                            <img src="./images/160801-17862pc-C.jpg" alt="1">
                            <img src="./images/160801-17862pc-C.jpg" alt="1">
                            <img src="./images/160801-17862pc-C.jpg" alt="1">

                        </div>
                        <div>
                            <img src="./images/wanzi.jpg" alt="">
                            <img src="./images/wanzi.jpg" alt="">
                            <img src="./images/wanzi.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="cloth-top top1">
                    111
                </div>
                <div class="cloth-top top2">
                    222
                </div>
                <div class="cloth-logo">
                    <!-- <img src="./images/logo2.png" alt="1"> -->
                    <img src="./images/9.jpg" alt="1">
                    <img src="./images/8.jpg" alt="1">
                    <img src="./images/7.jpg" alt="1">
                    <img src="./images/6.jpg" alt="1">
                    <img src="./images/5.jpg" alt="1">
                    <img src="./images/4.jpg" alt="1">
                    <img src="./images/3.jpg" alt="1">
                    <img src="./images/123.jpg" alt="1">
                    <img src="./images/10.jpg" alt="1">
                </div>
            </div>
        </div>
        <!-- 童装 童鞋 婴儿装 -->
        <div class="children">
            <!-- 服装头 -->
            <div class="book cf">
                <div class="book-nav cf">
                    <h2 class="fl">童装 童鞋 婴儿装</h2>
                    <div class="book-active fr">
                        <span class="on bnt">儿童服装 </span>
                        <span class="bnt">婴儿装</span>
                        <span class="bnt">小潮童鞋</span>
                    </div>
                </div>
            </div>
            <!-- 服装体 -->
            <div class="cloth-main cf">
                <div class="cloth-top activee">
                    <div class="cloth-left fl">
                        <a href="#">
                            <img src="./images/ch1.jpg" alt="1">
                        </a>
                        <div class="classify">
                            <a href="#">女包</a>
                            <a href="#">防晒品</a>
                            <a href="#">短裤</a>
                            <a href="#">冰丝内裤</a>
                            <a href="#">男包</a>
                            <a href="#">功能箱包</a>
                            <a href="#">蕾丝衬衫</a>
                            <a href="#">奢侈品</a>
                            <a href="#">男鞋</a>
                            <a href="#">女包</a>
                            <a href="#">女鞋</a>
                            <a href="#">全部分类></a>
                        </div>
                    </div>
                    <div class="cloth-min fl">
                        <div class="cloth-min-top">
                            <!--轮播开始-->
                            <div class="pptbox" id="childrenppt">
                                <!--轮播的内容-->
                                <ul class="innerwrapper">
                                    <li>
                                        <a href="#"><img src="images/index10_05.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner2.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner3.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner4.jpg" /></a>
                                    </li>
                                    <li>
                                        <a href="#"><img src="images/banner5.jpg" /></a>
                                    </li>
                                </ul>
                                <!--数字控制器-->
                                <ul class="controls">
                                    <li class="current">1</li>
                                    <li>2</li>
                                    <li>3</li>
                                    <li>4</li>
                                    <li>5</li>
                                </ul>
                                <!--按钮控制器-->
                                <span class="btnleft"></span>
                                <span class="btnright"></span>
                            </div>
                            <!--轮播结束-->
                        </div>
                        <div class="cloth-min-bot">
                            <a href="#">
                                <img src="./images/index11_08.jpg" alt="1">
                            </a>
                        </div>
                    </div>
                    <div class="cloth-right fl">
                        <div>
                            <img src="./images/ch3.jpg" alt="1">
                            <img src="./images/ch3.jpg" alt="1">
                            <img src="./images/ch3.jpg" alt="1">

                        </div>
                        <div>
                            <img src="./images/ch2.jpg" alt="">
                            <img src="./images/ch2.jpg" alt="">
                            <img src="./images/ch2.jpg" alt="">
                        </div>
                    </div>
                </div>
                <div class="cloth-top top1">
                    111
                </div>
                <div class="cloth-top top2">
                    222
                </div>
                <div class="cloth-logo">
                    <!-- <img src="./images/logo2.png" alt="1"> -->
                    <img src="./images/9.jpg" alt="1">
                    <img src="./images/8.jpg" alt="1">
                    <img src="./images/7.jpg" alt="1">
                    <img src="./images/6.jpg" alt="1">
                    <img src="./images/5.jpg" alt="1">
                    <img src="./images/4.jpg" alt="1">
                    <img src="./images/3.jpg" alt="1">
                    <img src="./images/123.jpg" alt="1">
                    <img src="./images/10.jpg" alt="1">
                </div>
            </div>
        </div>
        <!-- 家居日用 -->
        <div class="days">
            <!-- 服装头 -->
            <div class="book cf">
                <div class="book-nav cf">
                    <h2 class="fl">家居日用</h2>
                </div>
            </div>
            <!-- 服装体 -->
            <div class="cloth-main cf">
                <div class="left">
                    <img src="./images/days1.jpg" alt="1">
                </div>
                <div class="right">
                    <div>
                        <img src="images/days2.jpg" alt="1">
                        <img src="images/days2.jpg" alt="1">
                        <img src="images/days2.jpg" alt="1">
                        <img src="images/days2.jpg" alt="1">
                    </div>
                    <div>
                        <img src="./images/days3.jpg" alt="1">
                        <img src="./images/days3.jpg" alt="1">
                        <img src="./images/days3.jpg" alt="1">
                        <img src="./images/days3.jpg" alt="1">
                    </div>
                </div>
            </div>
        </div>
        <!-- 推广商品 -->
        <div class="product">
            <!-- 服装头 -->
            <div class="book cf">
                <div class="book-nav cf">
                    <h2 class="fl">推广商品</h2>
                    <div class="fr">
                        <span class="spanon"></span>
                        <span></span>
                    </div>

                </div>
            </div>
            <!-- 服装体 -->
            <div class="cloth-main on cf">
                <div class="producton">
                    <img src="./images/index25_12.jpg" alt="1">
                    <p>Pigeon法国制奶嘴，无毒天然乳胶</p>
                    <p>￥:189</p>
                    <p><span><img src="./images/index27_14.jpg" alt="1"></span>已有<em class="f6">988</em>条评价</p>
                </div>
                <script>
                    for (let i = 1; i < 10; i++) {
                        document.write(`
                        <div class="">
                    <img src="./images/index25_12.jpg" alt="1">
                    <p>Pigeon法国制奶嘴，无毒天然乳胶</p>
                    <p>￥:189</p>
                    <p><span><img src="./images/index27_14.jpg" alt="1"></span>已有<em class="f6">988</em>条评价</p>
                    </div>
                        `)
                    }
                </script>
            </div>
            <div class="cloth-main on1"></div>
        </div>
    </main>
    <!-- 尾部 -->
    <div class="line"></div>
    <footer>
        <div class="top">
            <img src="./images/222_11.png" alt="1">
            <img src="./images/222_13.png" alt="1">
            <img src="./images/222_15.png" alt="1">
            <img src="./images/222_17.png" alt="1">
        </div>
        <div class="bot">
            <div>
                <span>购物指南</span>
                <p>购物流程</p>
                <p>发票制度</p>
                <p>账户管理</p>
                <p>会员优惠</p>
            </div>
            <div>
                <span>支付方式</span>
                <p>货到付款</p>
                <p>网上支付</p>
                <p>礼品卡支付</p>
                <p>银行转帐</p>
            </div>
            <div>
                <span>订单服务</span>
                <p>订单配送查询</p>
                <p>订单状态说明</p>
                <p>自助取消订单</p>
                <p>自助修改订单</p>
            </div>
            <div>
                <span>商家服务</span>
                <p>商家中心</p>
                <p>运营服务</p>
                <p>加入尾品汇</p>
            </div>
            <div class="logo"><img src="./images/logo_00.png" alt="1"></div>
        </div>
        <p><a href="#">公司简介</a> | <a href="#">Investor Relations</a> | <a href="#">网站联盟</a> | <a href="#">乐购招商</a> | <a
                href="#">机构销售</a> | <a href="#">手机乐购</a> | <a href="#">官方Blog</a> | <a href="#">热词搜索</a></p>
        <div class="last"><span> Copyright (C) 乐购网 2004-2016, All Rights Reserved</span> </div>

    </footer>
    <!-- 返回顶部 -->
    <div class="backtop">
        <img src="./images/gototop_05.jpg" alt="1">
    </div>
    <!-- 边栏 -->
    <div class="aside">
        <div>
            <img src="./images/indexleft_05.png" alt="1">
            <img src="./images/tushu1.jpg" alt="1">
        </div>
        <div>
            <img src="./images/indexleft_08.png" alt="1">
            <img src="./images/fuzhuan1.jpg" alt="1">
        </div>
        <div>
            <img src="./images/indexleft_11.png" alt="1">
            <img src="./images/yundong1.jpg" alt="1">
        </div>
        <div>
            <img src="./images/indexleft_14.png" alt="1">
            <img src="./images/tongzhuan1.jpg" alt="1">
        </div>
        <div>
            <img src="./images/indexleft_17.png" alt="1">
            <img src="./images/jiaoju1.jpg" alt="1">
        </div>
    </div>
    <!-- 固定搜索框 -->
    <div class="fix-search">
        <div class="search">
            <input type="text" placeholder="搜素商品">
            <button type="button" >搜索</button>
        </div>
    </div>
    <!-- 领券中心 -->
    <div class="coupon">
        <img src="./images/two_30.jpg" alt="1">
        <img src="./images/two_35.jpg" alt="1">
        <img src="./images/two_40.jpg" alt="1">
        <div class="hidden">
         <img src="./images/two_34.jpg" alt="1">
        </div>
    </div>
</body>
<script src="./lib/jquery-1.11.0.js"></script>
<script src="./lib/bnner/slider.js"></script>
<script src="./js/index.js"></script>

</html>